﻿@page "/PersonalCenter"

<div class="personal">
    <div class="user">
        <div class="avatar">
            <MImage MaxHeight="150"
                    MaxWidth="150"
                    Style=" border-radius: 18px;"
                    Src="@UserInfo.HeadPortraits">
            </MImage>
        </div>
        <div class="user-info">
            @(UserInfo != null ? UserInfo?.Name : "")
        </div>
    </div>

    <div class="user-lime">
        <MProgressLinear Height="15" Value="@(UserInfo?.Percentage??0)" Color="lime" Style="border-radius:18px;">已使用@(CommonHelper.GetFileSize(UserInfo?.UsedSize))/@(CommonHelper.GetFileSize(UserInfo?.TotalSize))</MProgressLinear>
        </div>

        <div class="settings">

            <MList Style="border-radius: 12px;"
               Dense
               Nav>

                <MListItem Link>
                    <MListItemIcon>
                        <MImage Src="https://token-cloud-storage.oss-cn-shenzhen.aliyuncs.com/icon/update.png" Dark></MImage>
                    </MListItemIcon>

                    <MListItemContent>
                        <MListItemTitle>编辑个人资料</MListItemTitle>
                    </MListItemContent>
                </MListItem>
                <MDivider></MDivider>

                <MListItem Link>
                    <MListItemIcon>
                        <MImage Src="https://token-cloud-storage.oss-cn-shenzhen.aliyuncs.com/icon/setting.png" Dark></MImage>
                    </MListItemIcon>

                    <MListItemContent>
                        <MListItemTitle>设置</MListItemTitle>
                    </MListItemContent>
                </MListItem>
                <MDivider></MDivider>


                <MListItem Link OnClick="OnLogoutClick">
                    <MListItemIcon>
                        <MImage Src="https://token-cloud-storage.oss-cn-shenzhen.aliyuncs.com/icon/logout.png" Dark></MImage>
                    </MListItemIcon>

                    <MListItemContent>
                        <MListItemTitle>退出登录</MListItemTitle>
                    </MListItemContent>
                </MListItem>
                <MDivider></MDivider>
            </MList>
        </div>
    </div>
